<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Item Details</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />
</head>
<body>
<header th:replace="common/top"></header>
<div id="BackLink">
    <a th:href="@{/catalog/viewProduct(categoryId=${category.categoryId},productId=${product.productId})}"> Return to <span th:text="${product.getProductId()}"/></a>
</div>

<div id="Wrapper">
    <div id="Catalog" style="display: flex; justify-content: center; align-items: center; position: absolute; top: 40%; border: 3px solid #734012; border-radius: 12px; padding: 20px; margin: 20px auto; background-color: #fffdfa; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 1200px;">

        <!-- 左侧图片 -->
        <div class="image-container" style="flex: 1; text-align: center; padding: 10px; background-color: #fef3e7; border-radius: 8px;">
            <img th:src="${item.descriptionImage}" alt="Item Image" />
        </div>

        <!-- 右侧表格 -->
        <div class="table-container" style="flex: 1; padding: 10px; border-left: 1px dashed #d4a373;">
            <table style="width: 100%; border-collapse: collapse;">
                <!-- 表格内容 -->

                <tr>
                    <td><b th:text="${item.itemId}"></b></td>
                </tr>
                <tr>
                    <td>
                        <b>
                            <span th:text="${item.attribute1}"></span>
                            <span th:text="${item.attribute2}"></span>
                            <span th:text="${item.attribute3}"></span>
                            <span th:text="${item.attribute4}"></span>
                            <span th:text="${item.attribute5}"></span>
                            <span th:text="${product.productName}"></span>
                        </b>
                    </td>
                </tr>
                <tr>
                    <td th:text="${product.productName}"></td>
                </tr>

                <tr>
                    <td>
                        <span th:if="${item.quantity <= 0}">Back ordered.</span>
                        <span th:if="${item.quantity > 0}" th:text="${item.quantity + ' in stock.'}"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span th:text="${formattedPrice}"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <a th:href="@{/cart/addItem(workingItemId=${item.itemId})}" class="Button">Add to Cart</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<footer th:replace="common/bottom"></footer>
</body>
</html>